<template>
    <div class="divBox" v-if="drawer">
      <el-drawer
      :title="this.id > 0 ? '详情' : '新增'"
      :visible.sync="drawer"
      direction="rtl"
      :show-close="true"
      :wrapper-closable="true"
      :append-to-body="true"
      :wrapperClosable="false"
      :before-close="handleClose"
      :size="`85%`"
    >
      <wlIndex :selectData="selectData" :id="id" :pagestatus="pagestatus"></wlIndex>
    </el-drawer>
    </div>
  </template>
  
  <script>
  import { crudModuleListApi } from '@/api/develop'
  import wlIndex from '@/views/develop/module/wlIndex.vue';
  export default {
    name: 'box',
    components: {
      wlIndex
    },
    data() {
      return {
        treeData: [],
        loading: false,
        tableData: [],
        frame_id: 0,
        num: 0,
        personConfig: {},
        total: 0,
        formData: {
          page: 1,
          limit: 15,
          name: ''
        },
        drawer: false,
        id: 0,
        pagestatus: 2,
        selectData: {},
       
      }
    },
    props: {
      
    },
    
    beforeDestroy() {
      
    },
    created() {
      
    },
    mounted() {
     
    },
    methods: {
      async openBox(id, data){
          this.id = id;
          console.log("openBox", data)
          this.selectData = data;
          this.drawer = true;
      },
      handleClose(){
        this.drawer = false;
        this.selectData = {}
      },
      
      // 升序排序函数
      sortedAsc(items) {
        return [...items].sort((a, b) => 
          a.leibiedaima.localeCompare(b.leibiedaima)
        )
      },
      // 移除非中文字符函数
      removeNonChinese(str) {
          // 匹配所有非中文字符，并替换为空
          return str.replace(/[^\u4e00-\u9fa5\u3400-\u4DBF\u{20000}-\u{2A6DF}\u{2A700}-\u{2B73F}\u{2B740}-\u{2B81F}\u{2B820}-\u{2CEAF}\u{2CEB0}-\u{2EBEF}\u{30000}-\u{3134F}\u{F900}-\u{FAFF}]/gu, '');
      },
      // 截取最后一个横杠后的字符和空格前的内容
      extractedText(str) {
          if(str){
            if(str.includes('-')){
              // 找到最后一个横杠的位置
              const lastDashIndex = str.lastIndexOf('-')
              // 找到空格的位置
              const spaceIndex = str.indexOf(' ', lastDashIndex)
              // 截取最后一个横杠后到空格前的内容
              if (lastDashIndex !== -1 && spaceIndex !== -1) {
                return str.substring(lastDashIndex + 1, spaceIndex)
              }
              // 如果没有空格，就取横杠后的所有内容
              else if (lastDashIndex !== -1) {
                return str.substring(lastDashIndex + 1)
              }
              // 如果没有横杠，返回空字符串
              return ''
            }else{
              return str;
            }
          }else{
            return ''
          }
      },
     
      // 构建树形结构函数
      buildTreeWithMap(data, idKey = 'leibiedaima', parentKey = 'fuwuliaoleibie', childrenKey = 'children') {
        const map = {}
        const tree = []
        
        // 首先构建一个映射表
        data.forEach(item => {
          map[item[idKey]] = { ...item, [childrenKey]: [] }
        })
        
        // 构建树形结构
        data.forEach(item => {
          const parent = map[item[parentKey]]
          if (parent) {
            parent[childrenKey].push(map[item[idKey]])
          } else if (item[parentKey] === null || item[parentKey] === '') {
            tree.push(map[item[idKey]])
          }
        })
        
        return tree
      },
      getFrameid(e){
          console.log(e);
      },
      handleInvitees() {
        this.handleSearch()
      },
      handleSearch() {
        this.formData.page = 1
        this.getTableList()
      },
      // 分页
      pageChange(page) {
        this.formData.page = page
        this.getTableList()
      },
      handleSizeChange(size) {
        this.formData.limit = size
        this.getTableList()
      },
      // 编辑用户
      onEdit(id) {
        this.userId = id
        this.$refs.editUser.open()
      },
      // 设置所在部门
      openDepartment(type) {
        this.indexType = type
        if (type === 1) {
          this.isSite = true
          this.onlyDepartment = false
          const selection = this.$refs.multipleTable.selection
          if (!selection.length) return this.$message.error(this.$t('setting.group.selectmember'))
        } else {
          this.isSite = false
          this.onlyDepartment = true
        }
        this.$refs.department.reseatData()
        this.openStatus = true
      },
  
      handleTree() {},
      //  删除人员
      onDelete(id, index) {
        this.$modalSure(this.$t('setting.group.deletitle')).then(() => {
          enterpriseCardDeleteApi(id).then((res) => {
            this.tableData.splice(index, 1)
          })
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .divBox {
    height: 100%;
  }
  .mt16 {
    margin-top: 7px;
  }
  .img {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 4px;
  }
  
  .prompt-bag {
    background-color: #edf5ff;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #606266;
  }
  /deep/.el-button--small {
    font-size: 13px;
  }
  
  .el-icon-question {
    cursor: pointer;
    color: #1890ff;
    font-size: 15px;
  }
  /deep/ .el-card__body {
    padding: 0 20px;
  }
  .iconzhuyaobumen {
    color: #ff9900;
  }
  .boder-left {
    min-height: calc(100vh - 77px);
    border-left: 1px solid #eeeeee;
  }
  .p20 {
    padding: 20px 0;
  }
  
  .table-container {
    margin-top: 10px;
  }
  
  .frame-name {
    .iconfont {
      padding-right: 6px;
    }
  }
  .icon-h {
    position: relative;
    & > span {
      color: #1890ff;
    }
    .guan {
      color: #ff9900;
    }
  }
  .icon {
    position: absolute;
    top: 0;
    right: -15px;
    display: inline-block;
    width: 15px;
    height: 15px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    line-height: 15px;
    color: #fff;
    border-radius: 50%;
    background-color: #ff9900;
  }
  /deep/.select-bar {
    line-height: 32px;
  }
  </style>
  <style>
  .monitor-yt-popover {
    background: #edf5ff;
    border: 1px solid #97c3ff;
    padding: 13px 15px 6px 15px;
  }
  </style>
  